  <template>
  <div class="register">
    <nav-top title="注册" :goback="true"></nav-top>
    <div class="logo">
      <img src="/static/img/register-logo.png" />
    </div>
    <div class="form">
      <van-field class="input input-tel" v-model="phone" label-width="70px" clearable type="tel" placeholder="请输入手机号">
        <img class="icon-img" src="/static/icon/phone.png" slot="left-icon" />
        <div slot="label">
          <select v-model="itac">
            <option value="+86">+86</option>
            <option value="+852">+852</option>
          </select>
        </div>
      </van-field>
      <van-field class="input" v-model="passwd" clearable type="password" placeholder="请输入密码">
        <img class="icon-img" src="/static/icon/passwd.png" slot="left-icon" />
      </van-field>
      <van-field
        class="input"
        v-model="passwdAgain"
        clearable
        type="password"
        placeholder="请再次输入密码"
      >
        <img class="icon-img" src="/static/icon/passwd.png" slot="left-icon" />
      </van-field>
      <van-field class="input" v-model="code" clearable placeholder="请输入验证码">
        <img class="icon-img" src="/static/icon/phone-code.png" slot="left-icon" />
        <van-button class="send-code" slot="button" size="small" type="primary" @click="phoneCode">{{ sendAuthCode ? "获取验证码" : auth_time + "秒" }}</van-button>
      </van-field>
      <van-button class="submit" type="primary" size="large" @click="register">注册</van-button>
    </div>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import { Register, RegisterPhoneCode } from "./../../libs/api"

export default {
  components: {
    NavTop
  },
  name: "Register",
  methods:{
    register:function(){
      if(this.phone.length<5){
        this.$notify({ type: 'danger', message: '手机号码不正确' });
        return
      }
      if(this.passwd.length<6){
        this.$notify({ type: 'danger', message: '密码不得低于6位' });
        return
      }
      if(this.passwd != this.passwdAgain){
        this.$notify({ type: 'danger', message: '两次密码输入不一致' });
        return
      }
      if(this.code.length < 4){
        this.$notify({ type: 'danger', message: '验证码输入错误' });
        return
      }
      Register(this.phone,this.passwd,this.itac,this.code)
      .then((resp)=>{
        var res = resp.data
        if(res.code==1){
          this.$notify({ type: 'success', message: '注册成功' });
          window.location.href = '/auth/login'
          return
        }
        this.$notify({ type: 'danger', message: res.msg });
      })
      .catch((err)=>{
        this.$notify({ type: 'danger', message: err });
      })
    },
    phoneCode:function(){
      if(!this.sendAuthCode){
        this.$notify({ type: 'danger', message: "请等待"+ this.auth_time + "秒后重试" });
        return
      }
      RegisterPhoneCode(this.phone,this.itac)
      .then((resp)=>{
        var res = resp.data
        if(res.code==1){
          this.$notify({ type: 'success', message: '验证码发送成功' });
          // 倒计时
          this.sendAuthCode = false;
          this.auth_time = 60;
          var auth_timetimer =  setInterval(()=>{
              this.auth_time--;
              if(this.auth_time<=0){
                  this.sendAuthCode = true;
                  clearInterval(auth_timetimer);
              }
          }, 1000);
          return
        }
        this.$notify({ type: 'danger', message: res.msg });
      })
      .catch((err)=>{
        this.$notify({ type: 'danger', message: err });
      })
    }
  },
  data() {
    return {
      phone: "",
      passwd: "",
      passwdAgain: "",
      itac: "+86",
      code: "",
      sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      auth_time: 0, /*倒计时 计数器*/
      authcode:false,
    };
  }
};
</script>
<style lang='scss' scoped>
.register {
  height: 690px;
  .logo {
    text-align: center;
    position: relative;
    top: 97px;
    height: 0;
    img {
      width: 87px;
      height: 31px;
    }
  }
  .form {
    position: relative;
    top: 170px;
    padding-left: 21px;
    padding-right: 21px;
    .icon-img {
      width: 17px;
    }
    .input {
      position: relative;
      padding: 0px;
      padding-top: 15px;
      padding-bottom: 11px;
      border-bottom: 1px solid #ececec;
      font-size: 13px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      ::-webkit-input-placeholder {
        color: rgba(214, 214, 214, 1);
      }
      .send-code {
        height: 16px;
        line-height: 1px;
        font-size: 12px;
        background: #fff;
        color: #4d39c6;
        border: none;
      }
    }
    .input-tel {
      position: relative;
      select {
        position: absolute;
        width: 60px;
        height: 30px;
        top: 10px;
        border: none;
      }
    }
    .submit {
      margin-top: 120px;
      height: 44px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1px;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 2px;
    }
  }
}
</style>
